<style type="text/css">
	.content{margin:20px;}
	.head-image{width: 80px;height: 80px;margin-bottom: 20px;border:1px solid #e6e6e6;}
	.cloud-card{border-radius: 4px}
</style>
<div class="content cloud-card">
	<div class="layui-form layui-form-pane" action="" lay-filter="setting_form" >
		<fieldset class="layui-elem-field layui-field-title">
			<legend>用户基本信息</legend>
			<div class="layui-field-box">
				<div class="">
					<img src="/static/cloud/image/head_image.png" class="head-image">
					<button type="button" class="layui-btn layui-btn-sm" id="upload">
						<i class="layui-icon">&#xe67c;</i>上传头像(小于500kb)
					</button>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">昵称</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input u_name" lay-verify="" placeholder="10个字以内" name="u_name">
					</div>
				</div>
			</div>
		</fieldset>
		
		<fieldset class="layui-elem-field layui-field-title">
			<legend>webdav 相关设置</legend>
			<div class="layui-field-box">

				<div class="layui-form-item" pane="">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<input type="checkbox" lay-filter="webdav_status" id="setting_webdav_status" name="setting_webdav_status" lay-skin="switch" lay-text="启用|停用">
					</div>
				</div>

				<blockquote class="layui-elem-quote">
					<div id="setting_webdav_url">网址：--</div>
					<div id="setting_webdav_username">账号：--</div>
				</blockquote>

				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" lay-verify="required|pass" placeholder="6-18位" name="webdav_pass">
					</div>
				</div>
			</div>
		</fieldset>
		

		<div class="layui-form-item">
			<div class="layui-input-block">
				<div class="layui-btn" lay-submit lay-filter="update" >确定</div>
			</div>
		</div>
		
	</div>
</div>
<script type="text/javascript">
	layui.use(['upload','form'],function(){
		var table=layui.table,$=layui.$, form=layui.form;

		form.render(); //更新全部

		var eHeadImage=$('.content .head-image');//头像
		var eName=$('.content .u_name');//昵称
		var eWebdavUrl= $('.content #setting_webdav_url');//webdav 网址
		var eWebdavUsername= $('.content #setting_webdav_username');//webdav 账号
		var eWebdavStatus = $('.content #setting_webdav_status');//webdav 状态

		

		// 设置webdav网址
		eWebdavUrl.text('网址：'+window.location.protocol + "//" + window.location.host+'/webdav');
		

		app.ajaxPost('/api/user/userInfo','',function(d){
			if(d.err_code==0){
				eHeadImage.attr('src',!d.data.head_image?'/static/cloud/image/head_image.png':d.data.head_image);
				eName.attr('value',d.data.name);
				eWebdavUsername.text('账号：' + d.data.username);
			}
		})

		app.ajaxPost('/api/webdav/info', '', function (d) {
			if (d.err_code == 0) {
				var status= false;
				var webdav_pass="";
				// console.log(d.data.info);
				if(d.data){
					if(d.data.status == 1){
						status = true;
					}
					webdav_pass= d.data.password;
				}
				// console.log(status, webdav_pass);
				form.val("setting_form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
					"setting_webdav_status": status,
					"webdav_pass": webdav_pass
				});
			}
		})

		var uploadInst = layui.upload.render({
		    elem: '#upload' //绑定元素
			,url: '/api/user/uploadHeadImage' //上传接口
			,headers: { Token: app.getToken()}
		    ,done: function(res){
		      	// console.log(res)
				// 上传失败
				if(res.err_code!=0){
					layer.msg(res.err_msg+'，请重新上传');
					return;
				}
		      	eHeadImage.attr('src',res.data.src);
		    }
		    ,error: function(){
		      //请求异常回调
		    }
		});

		layui.form.on('submit(update)', function(data){
		 	// console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
		 	// console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
		 	// console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
		 	var u_name=eName.val()
			var head_image=eHeadImage.attr('src');
			// console.log(u_name,head_image)
			var data= form.val("setting_form");
			var postData= { u_name: u_name, head_image: head_image };
			postData['password']= data.webdav_pass;
			postData['status'] = (data.setting_webdav_status == 'on') ? 1 : 0;
		 	app.ajaxPost('/api/user/updateInfo', postData,function(d){
		 		if(d.err_code==0){
		 			layer.msg('修改成功');
					$('#cloud-user img').attr('src',head_image);
					$('#cloud-user-name').text(u_name)
		 		}else{
		 			layer.msg('修改失败，'+d.err_msg)
		 		}
		 	})


		 	return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});

		// form.on('switch(webdav_status)', function (data) {
		// 	console.log(data.elem); //得到checkbox原始DOM对象
		// 	console.log(data.elem.checked); //开关是否开启，true或者false
		// 	console.log(data.value); //开关value值，也可以通过data.elem.value得到
		// 	console.log(data.othis); //得到美化后的DOM对象
		// });

		layui.form.verify({
		   pass :[
			    /^[\S]{6,18}$/
			    ,'密码必须6到18位，且不能出现空格'
			  ]
		});  
		
		
	})
</script>